<template>
	<view>
		<u-tabbar :value="state.tabber.tabberIndex" @change="changeTabber" :fixed="true" :placeholder="false">
			<u-tabbar-item v-for="(item, index) of state.tabber.tabberList" :key="index" :text="item.text">
				<template #active-icon>
					<image class="u-page__item__slot-icon" :src="item.iconSelect"></image>
				</template>
				<template #inactive-icon>
					<image class="u-page__item__slot-icon" :src="item.icon"></image>
				</template>
			</u-tabbar-item>
		</u-tabbar>
		<view class="centerIcon" v-if="state.tabber.tabberList.length == 3" @click="centerIconClick">
			<img :class="{ iosCss: deviceType, iosCss1: deviceType1 }" src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/addIcon.png" alt="" />
		</view>
	</view>
</template>

<script setup>
import { computed, getCurrentInstance, ref } from 'vue';
import { useStore } from 'vuex';
import { onLoad, getSystemInfo } from '@dcloudio/uni-app';
const { proxy } = getCurrentInstance(); // 全局引用
const { state, commit, dispatch } = useStore();
let changeTabber = e => {
	commit('tabber/changeTabberIndex', e); // 调用user文件里的addNum方法（mutations）
};
let centerIconClick = () => {
	proxy.$pageJump.navigateTo('/pages/views/install/components/addDevice/index');
};
let deviceType = ref(null);
let deviceType1 = ref(null)
onLoad(() => {
	uni.getSystemInfo({
		success: res => {
			// console.log('所获取设备数据皆来自设备', res);
			if (res.osName == 'ios') {
				if (res.deviceModel == 'iPhone 6/7/8') {
				} else if (res.deviceModel == 'iPhone 6/7/8 Plus') {
				} else if (res.deviceModel == 'iPhone X') {
					deviceType1.value = true;
				} else {
					deviceType.value = true;
				}
			}
		}
	});
});
</script>

<style scoped lang="scss">
.centerIcon {
	image {
		width: 125rpx;
		height: 125rpx;
		position: fixed;
		left: 50%;
		margin-left: -60rpx;
		bottom: 1%;
		z-index: 2;
	}
}
.iosCss {
	bottom: 4.5% !important;
}
.iosCss1 {
	bottom: 5.5% !important;
}
.u-page__item__slot-icon {
	width: 45rpx;
	height: 45rpx;
	margin-bottom: 6rpx;
}
</style>
